import React, { FC } from 'react'

const List1: FC = () => {
  //问卷数据列表
  const questOnList = [
    { id: 1, title: '问卷1', is: false },
    { id: 2, title: '问卷2', is: true },
    { id: 3, title: '问卷3', is: true },
    { id: 4, title: '问卷4', is: false },
  ]

  function edit(id: number) {
    console.log(id)
  }

  return (
    <div className="App">
      <h1>问卷列表</h1>
      <div>
        {questOnList.map(item => {
          const { id, title, is } = item
          return (
            <div key={id} className="list-item">
              <strong>{title}</strong>
              {is ? <span style={{ color: 'green' }}>已发布</span> : <span>未发布</span>}
              <button
                onClick={() => {
                  edit(id)
                }}
              >
                编辑
              </button>
            </div>
          )
        })}
      </div>
    </div>
  )
}

export default List1
